<?php
    $rand = rand(1,10000);
?>

<div style="height: 430px;position: relative;">


    <div style="border:1px solid #DDDDDD;border-radius: 10px; font-size: 12px; padding:10px;width: 410px;">
        <div style="">
            <b>Esperanza</b>: <?php echo number_format($esperanza,3,".",""); ?>
        </div>
        <div style="">
            <b>Desviación Estándar</b>: <?php echo number_format($desviacion,3,".",""); ?>
        </div>
        <br>
        <div style="font-size: 14px;font-style: italic;">
            <b>Regresión Lineal</b>
        </div>
        <div style="">
            <b>Alpha</b>: <?php echo number_format($alpha,3,".",""); ?>
        </div>
        <div style="">
            <b>Beta</b>: <?php echo number_format($beta,3,".",""); ?>
        </div>
        <div style="">
            <b>Alumnos considerados</b>: <?php echo $alumnos_considerados; ?>
        </div>
    </div>
    <div id="container_d<?php echo $rand; ?>" style="height: 420px; width: 410px; padding: 10px;"></div>

</div>
<style type="text/css">
.highcharts-title
    {
        font-size: 8px;
    }
</style>

<script>
    <?php
        foreach($puntajes as $puntaje){
            $puntajes_l[] = "[".$puntaje["lenguaje"][0].",".$puntaje["lenguaje"][1]."]";
            $puntajes_m[] = "[".$puntaje["matematica"][0].",".$puntaje["matematica"][1]."]";
            $puntajes_p[] = "[".$puntaje["promedio"][0].",".$puntaje["promedio"][1]."]";
        }
        
        $puntajes_lenguaje = implode(",",$puntajes_l);
        $puntajes_matematica = implode(",",$puntajes_m);
        $puntajes_promedio = implode(",",$puntajes_p);


        $frecuencia_maxima = 0;
        foreach($frecuencia_notas as $nota_f => $frecuencia_f){

            $frecuencias_array[] = "[".$nota_f.",".$frecuencia_f."]";
            if($frecuencia_f >= $frecuencia_maxima){
                $frecuencia_maxima = $frecuencia_f;
            }
        }


        $frecuencias = implode(",",$frecuencias_array);


    ?>


var chart;
$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container_d<?php echo $rand; ?>',
			zoomType: 'xy'
		},
		title: {
			text: 'Distribución de puntajes PSU'
		},
		subtitle: {
			text: 'Fuente: DEMRE 2011'
		},
		xAxis: {
			title: {
				enabled: true,
				text: 'Nota Enseñanza media'
			},
			startOnTick: true,
			endOnTick: true,
			showLastLabel: true,
                        min: 4,
                        max: 7.1
		},
		yAxis: [{
                    title: {
				text: 'Puntaje PSU'
			},
                        min: 200,
                        max: 850

		},{
                    title: {
				text: 'Distribución de notas'
			},
                        min: 0,
                        max: <?php echo $frecuencia_maxima*2; ?>,
                        opposite: true

                    },
                ],
		tooltip: {
			formatter: function() {
					return ''+
					'Nota: '+this.x +' , '+ (this.series.name == 'Frecuencia Notas' ? 'Frecuencia (cuantos)' : 'Puntaje') +': '+ this.y +' ';
			}
		},
		legend: {
			layout: 'vertical',
			align: 'center',
			verticalAlign: 'bottom',
			floating: false,
			backgroundColor: '#FFFFFF',
			borderWidth: 1
		},
		plotOptions: {
			scatter: {
				marker: {
					radius: 2,
					states: {
						hover: {
							enabled: true,
							lineColor: 'rgb(100,100,100)'
						}
					}
				},
				states: {
					hover: {
						marker: {
							enabled: false
						}
					}
				}
			}
		},
		series: [{
			name: 'Puntaje PSU Lenguaje',
			type: 'scatter',
			color: 'rgba(223, 83, 83, .3)',
			data: [<?php echo $puntajes_lenguaje ;?>]

		}, {
			name: 'Puntaje PSU Matemáticas',
			type: 'scatter',
			color: 'rgba(83, 83, 223, .3)',
			data: [<?php echo $puntajes_matematica;?>]
		}, {
			name: 'Puntaje PSU Promedio',
			type: 'scatter',
			color: 'rgba(83, 223, 83, .8)',
			data: [<?php echo $puntajes_promedio;?>]
		}, {
			name: 'Regresión lineal Promedio',
			type: 'line',
			color: 'rgba(180, 180, 180, .9)',
			data: [[<?php echo $recta_regresion[0][0]; ?>,<?php echo $recta_regresion[0][1]; ?>], [<?php echo $recta_regresion[1][0]; ?>,<?php echo $recta_regresion[1][1]; ?>]]
		}, {
			name: 'Frecuencia Notas',
			type: 'line',
			color: 'rgba(180, 22, 22, .8)',
			data: [<?php echo $frecuencias;?>],
                        yAxis: 1
		}]
	});
});

</script>